<template>
  <view class="keyboard-wrapper s-b-p">
    <NotesSection @update:noteValue="onUpdateNotes"
                  :note.sync="note"
                  @update:dateValue="onUpdateCreatedAt"
                  :createdAt.sync="createdAt"
    />
    <NumberPadSection @update:value="onUpdateAmount" :amount.sync="amount" @onSubmit="onSubmit"/>
    <view class="s-b-h"/>
  </view>
</template>

<script>
import NotesSection from '@/main/Home/childComps/Money/NotesSection'
import NumberPadSection from '@/main/Home/childComps/Money/NumberPadSection'

export default {
  components: { NotesSection, NumberPadSection },
  props: {
    note: String,
    createdAt: String,
    amount: Number
  },

  watch: {
    note(note, o) {
      this.$emit('update:note', note)
    },
    createdAt(createdAt, o) {
      this.$emit('update:createdAt', createdAt)
    },
    amount(amount, o) {
      this.$emit('update:amount', amount)
    }
  },

  methods: {
    onSubmit() {
      this.$emit('onSubmit')
    },
    onUpdateNotes(note) {
      this.$emit('update:note', note)
    },
    onUpdateCreatedAt(createdAt) {
      this.$emit('update:createdAt', createdAt)
    },
    onUpdateAmount(amount) {
      this.$emit('update:amount', amount)
    }
  }
}

</script>

<style lang="scss" scoped>
  .keyboard-wrapper {
    background-color: $uni-color-primary;
    box-shadow: 2px 2px 3px rgba(0, 0, 0, .8);
  }
  .s-b-p{
    padding-bottom: 34rpx;
  }
</style>
